<script setup>
import { personGetTimeServe } from '@/api/person'
import { ref } from 'vue'

/*查时长*/
const searchTime = ref({ pagenum: 1, pagesize: 7 })
const totalTime = ref(0)
const dialogVisibleTime = ref(false)
const peopleTimeList = ref([])
const onShowTime = async () => {
  dialogVisibleTime.value = true
  const res = await personGetTimeServe(searchTime.value)
  peopleTimeList.value = res.record
  totalTime.value = res.total
}
const pageChangeTime = (page) => {
  searchTime.value.pagenum = page
  onShowTime()
}
defineExpose({
  onShowTime
})
</script>

<template>
  <!-- 弹窗显示值班时长表 -->
  <el-dialog v-model="dialogVisibleTime" title="当月维修人员值班时长" width="50%">
    <div>
      <el-table :data="peopleTimeList" border>
        <el-table-column align="center" label="序号" type="index" width="123"> </el-table-column>
        <el-table-column align="center" label="学号" prop="stu_id"> </el-table-column>
        <el-table-column align="center" label="姓名" prop="name"> </el-table-column>
        <el-table-column align="center" label="时长(小时)" prop="grade"> </el-table-column>
      </el-table>
      <el-pagination
        v-if="peopleTimeList[0]"
        v-model:current-page="searchTime.pagenum"
        v-model:page-size="searchTime.pagesize"
        :background="true"
        layout="total, prev, pager, next"
        :total="totalTime"
        style="margin-top: 20px; justify-content: flex-end"
        @current-change="pageChangeTime"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleTime = false">退出</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="" scoped></style>
